<!-- 
  setup 函数
    是什么：是Vue3中组合式API的入口
    参数：
      1. props
        调用该组件时，传递过来的 props 数据，该参数是一个Proxy对象。
        
      2. context
        一个上下文对象，里面有 attrs、emit、expose、slots。
          - attrs  是个 Proxy 代理对象        透传的 attrs 数据          this.$attrs
          - emit   是个函数                  用于触发一个自定义事件的函数   this.$emit()
          - expose 是个函数                  用于控制组件对外暴露的数据与方法的一个函数   expose选项
          - slots  是个 Proxy 代理对象        用于获取组件接受到的插槽内容
        整个 context 是个普通对象，那么你可以对它做解构
          
    为何提供 props 与 context 两个参数呢？ setup 顶层没有获取 this

    setup 可以有返回值，
      1. 返回值为 对象
      2. 返回值为 函数，就是一个 render 函数

  注意：
    1. props 参数是个 Proxy 对象，不要对它做解构赋值。会失去响应式

 -->

<template>
  <div>
    <h1>App</h1>

    <Hello name="张三" :age="myAge" sex="男" @change="myAge++">
      <template #top>
        <div>我的天呀</div>
      </template>

      <template #bottom>
        <div>我的地呀</div>
      </template>
    </Hello>
    <button @click="myAge++">age++</button>
  </div>
</template>

<script>
import Hello from './component/Hello.vue'

export default {
  components: {
    Hello,
  },

  data() {
    return {
      myAge: 18,
    }
  },
}
</script>
